<template>
  <div> 
    <div class="line1">
      <!--  条件搜索 -->
      <div class="line1">
        <div class="line1">
          <el-input v-model="name" placeholder="请输入客户名称"></el-input>
          <div>
    </div>
        </div>
        <div class="line1"> 
          <el-button type="primary" @click="search()">搜索</el-button>
          <el-button class="el-icon-refresh" @click="refresh()"></el-button>
          <el-button v-if="(userAll.sid == 3 && (role.endsWith('m') || role.endsWith('x'))) || role == 'manager'" type="primary" @click="generatedExcel" round>导出数据</el-button>
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div>
      <template>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%">
          <el-table-column
            prop="customer"
            label="客户名称"
            align="center">
          </el-table-column>
          <el-table-column
            prop="sno"
            label="账单编号"
            align="center">
          </el-table-column>
          <el-table-column
            prop="type"
            label="账单类型"
            align="center">
          </el-table-column>
          <el-table-column
            prop="totalPrice"
            label="总价"
            align="center">
          </el-table-column>
          <el-table-column
            prop="operator"
            label="经办人"
            align="center">
          </el-table-column>
          <el-table-column
            prop="operatorTime"
            label="创建时间"
            align="center">
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态"
            align="center">
          </el-table-column>
        </el-table>
      </template>
    </div>
    <!-- 分页插件 -->
    <div class="block" style="margin: auto">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page=page
        :page-sizes="[5, 10, 20, 40]"
        :page-size=size
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
      </el-pagination>
    </div>
  </div>
</template>
<script>
 export default{
  data(){
    return {
      tableData:[],
      page:1,
      size:5,
      total:0,
      name:'',
      userAll:{},
      role:'',
    }
  },
  methods:{
     //分页
     handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val
      this.getSaleMoneyData()
    },
    handleCurrentChange(val) {//修改页码时触发
      console.log(`当前页: ${val}`);
      //给当前页属性赋值
      this.page = val
      //发请求获取数据  调用方法
      this.getSaleMoneyData()
    },
    getSaleMoneyData: function(){
      let data = {
        current:this.page,
        size:this.size
      }
      console.log(data);
      this.$axios.post("saleMoney/moneyManage",data).then(res => {
        console.log(res.data.data)
        // 将数据渲染到页面上
        this.tableData = res.data.data.data
        this.total = res.data.data.total
      })
    },
    //条件查询
    search(){
      let data = {
        current:this.page,
        size:this.size,
        customer:this.name
      }
      console.log(data);
      this.$axios.post("saleMoney/moneyManage",data).then(res => {
        console.log(res.data.data)
        // 将数据渲染到页面上
        this.tableData = res.data.data.data
        this.total = res.data.data.total
        this.name = ''
      })
    },
    //刷新
    refresh(){
      this.getSaleMoneyData()
    },
    //导出表格
    generatedExcel(){
      this.$axios.post("export/itemExcel",this.tableData).then(res => {
          if(res.data.code == 200){
            this.$message.success("导出成功")
          }else{
            this.$message.success("导出失败")
          }
      })
    }
  },
  mounted:function(){
    this.getSaleMoneyData()

    this.$axios.get("/user/findUserByAccount/" + window.localStorage.getItem("account")).then(res => {
        console.log(res.data.data);
        this.userAll = res.data.data;
        this.role = res.data.data.roleList[0].name;
        console.log(this.role);
      });
  }
}
</script>
<style scoped>
.line1{
  display: flex;
}
</style>